<template>
	<div class="login">
		<div class="loginFrom">
			<h3 class="title">LaLa后台管理系统</h3>
			<el-input v-model="userName" type="text" placeholder="请输入用户名" ></el-input>
			<el-input v-model="userPwd" type="password" placeholder="请输入密码" ></el-input>
			<el-button type="primary" @click='login' @keyup.enter="login" :loading='load'>登录</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				userName: 'admin',
				userPwd: 'admin',
				load:false
			}
		},
		created() {
			var t = this;
			document.onkeydown = function(e) {
				// 箭头函数
			// document.onkeydown = e => {
				if (window.event == undefined) {
					var key = e.keyCode;
					// console.log(e.keyCode)
				} else {
					var key = window.event.keyCode;
					// console.log(window.event.keyCode)
				}
				//enter的ASCII码是13
				if (key == 13) {
					t.login();
				}
			}
		},
		mounted() {},
		methods: {
			login() {
				// const _this that self
				const _this = this;
				
				if (_this.userName === '') {
					_this.$message({
						message: '请输入用户名',
						type: 'error',
						duration: 1000,
					})
				} else if (_this.userPwd === '') {
					_this.$message({
						message: '请输入密码',
						type: 'error',
						duration: 1000
					})
				} else {
					// console.log(_this)
					// this.$axios.post(url, paramers).then(function(res) {}, function(error) {})
					_this.$axios.post("/api/v1/login", {
						"memberName": _this.userName,
						"memberPass": _this.userPwd,
					}).then(function(res) {
						// console.log(res)
						// console.log(res.data.data) 请求的返回值
						if (res.data.code == 200) {
							// 登录加载动画
							_this.load=true;
							// 存在this指向问题
							_this.$message({								
								message: '登录成功',
								type: 'success',
								duration: 1000,
								// 关闭时的回调函数, 参数为被关闭的 message 实例 
								// 当弹窗关闭的时候跳转
								onClose: function() {
									// 跳转之前把信息存储到 本地 sessionStorage 临时存储  member字段名 JSON.stringify(res.data.data) 值
									sessionStorage.setItem("member", JSON.stringify(res.data.data))
									// 跳转
									_this.$router.push("/home")
								}
							})
						} else if (res.data.code == 201) {
							// 登录加载动画
							_this.load=false;
							_this.$message({
								message: '登录失败',
								type: 'error',
								duration: 1000
							})
						}
					}, function(error) {

					})

				}
			}
		},
	}
</script>

<style scoped="scoped">
	.title {
		margin: 0 auto 30px auto;
		text-align: center;
		color: #707070;
	}

	.login {
		width: 100%;
		height: 100vh;
		background: url(../../assets/image/bg02.jpg) no-repeat center top;
		background-size: cover;
		/* background-size:cover */
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.loginFrom {
		width: 400px;
		border-radius: 6px;
		background: #fff;
		width: 400px;
		padding: 25px;
		box-sizing: border-box;
		/* background-color:rgba(255,255,255,0.2); */
	}

	.el-input {
		margin-bottom: 20px;
	}

	.el-button {
		width: 100%;
	}
</style>
